<template>
  <el-table :data="tableData" border max-height="460" style="width: 100%">
    <el-table-column label="Date" prop="date" width="180">

    </el-table-column>

    <el-table-column label="计划工作完成量" prop="plan" width="180">
      <template #default="scope">
        <p v-show="scope.row.show">{{ scope.row.plan }}</p>
        <el-input-number v-show="!scope.row.show" v-model="scope.row.plan" :max="5" :min="1"
                         :step="0.1"></el-input-number>
      </template>
    </el-table-column>
    <el-table-column label="实际工作完成量" prop="reality" width="180">
      <template #default="scope">
        <p v-show="scope.row.show">{{ scope.row.reality }}</p>
        <el-input-number v-show="!scope.row.show" v-model="scope.row.reality" :max="5" :min="0"
                         :step="0.1"></el-input-number>
      </template>
    </el-table-column>
    <el-table-column label="编辑">
      <template #default="scope">
        <el-button v-show="scope.row.show" size="small" @click="changeForm(scope.row)">修改</el-button>
        <el-button v-show="!scope.row.show" size="small" @click="changeForm(scope.row)">确认</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import {useProgressConfigStore} from '@/stores/ProgressConfig'

const ProgressConfigStore = useProgressConfigStore()

interface data {
  date: string
  name: string
  address: string
  show: boolean
}


const handleChange = (value: number) => {
  console.log(value)
}
const changeForm = (row: data) => {
  row.show = !row.show
}
const tableData = ProgressConfigStore.tabledata
</script>
